<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title>权限管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <style>
        .layui-table-page {
            text-align: center;
        }
        .layui-table {
            text-align: center;
            margin-top: -10px;
        }
        .layui-table-view thead th {
            text-align: center;
            font-weight: bold;
        }
        .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF;
        }
    </style>
<body  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--数据表格样式及附件-->
<!--表内功能-->
<script id="bar" type="text/html">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe6b2;</i>编辑权限
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
</script>
<div class="utable">
    <!--表格-->
    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        //方法渲染
        table.render({
            elem: '#list'
            ,id: 'tab'
            ,height: 520
            ,width: 1250
            ,url: '/jurisdiction/data'//数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'characterid', title: '编号',width: 100}
                ,{field: 'charactername', title: '角色'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar', width:500}
            ]]
        });

        //监听行工具事件
        table.on('tool(list)', function (obj) {
            var data = obj.data;//获取数据
            if (obj.event === 'del') {//删除
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }else if (obj.event === 'edit'){//编辑
                layer.open({
                    type: 2,
                    title: '权限编辑',
                    maxmin: true, //开启最大化最小化按钮
                    area: ['500px', '400px'],
                    content: ['/jurisdiction/toedit?id='+data.characterid]//这是链接你的页面地址 url
                });
            }
        })
    });
</script>
</html>